<template>
  <van-form label-width="80px" @submit="onSubmit">
    <van-field
      v-model="formData.email"
      name="用户名"
      label="用户名"
      placeholder="请输入邮箱账号"
      clearable
      :rules="[{ required: true, message: '请填写邮箱账号' }]"
    />
    <van-field
      v-model="formData.password"
      :type="passwordType"
      name="原密码"
      label="原密码"
      placeholder="原密码"
      :rules="[{ required: true, message: '请填写原密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            passwordType === 'password'
              ? (passwordType = 'text')
              : (passwordType = 'password')
          "
        />
      </template>
    </van-field>

    <van-field
      v-model="formData.newPassword"
      :type="newPassword"
      name="新密码"
      label="新密码"
      placeholder="会员新密码"
      :rules="[{ required: true, message: '请填写会员新密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            newPassword === 'password'
              ? (newPassword = 'text')
              : (newPassword = 'password')
          "
        />
      </template>
    </van-field>
    <van-field
      v-model="formData.verNewPassword"
      :type="verNewPassword"
      name="验证新密码"
      label="验证新密码"
      placeholder="会员验证新密码"
      :rules="[{ required: true, message: '请验证会员新密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            verNewPassword === 'password'
              ? (verNewPassword = 'text')
              : (verNewPassword = 'password')
          "
        />
      </template>
    </van-field>
    <div style="margin: 20px 10px">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      formData: {
        email: '407126588@qq.com',
        password: '123',
        newPassword: '',
        verNewPassword: ''
      },
      passwordType: 'password',
      newPassword: 'password',
      verNewPassword: 'password'
    }
  },
  methods: {
    onSubmit() {
      const formData = this.formData
      if (formData.newPassword === formData.verNewPassword) {
        this.update(this.formData).then(res => {
          console.log(res)
          if (res.data.ok === 1) {
            this.$toast.success(res.data.data)
            this.$emit('goto')
          } else {
            this.$toast.fail(res.data.data)
          }
        })
      } else {
        this.$toast.fail('验证新密码失败')
      }
    },
    ...mapActions(['update'])
  }
}
</script>

<style>
</style>
